import React from 'react';
import {Prompt} from 'react-router-dom';  //是否残忍离开这个页面的组件

export default class dfeib extends React.Component{
    constructor(props){  //类的参数传递中我们用constructor( )进行传参
        super();  //super(props)也没错       super 关键字用于访问父对象上的函数。 并且必须在this之前调用
        console.log(this.state) //undefined
        this.state={  //初始值
            power:false
        }
        console.log(this.state)
        // console.log(props);
        this.changePower=this.changePower.bind(this) //如果没有这个，下面的changePower方法执行报错，说找不到这个this,所以这里需要绑定一下this
    }
    changePower(){
        alert('已经开启');
        this.setState({
            power:true
        })
    }
    render(){
        return(
            <div>
                B页面
                <Prompt message='残忍离开' when={this.state.power}/>
                <button onClick={this.changePower}>启用</button>
            </div>
        )
    }
}

/**
 * prompt用法讲解
 *      1. 引入：  import {Prompt} from 'react-router-dom';
 *      2. 引入后可以在render()方法里直接使用  <Prompt message="残忍离开？"/>
 * 
 * <Prompt>标签有两个属性
 *      1. message：用于显示提示的文本信息。
 *      2. when：传递布尔值，相当于标签的开关，默认是true，设置成false时，<Prompt>失效。
 *      注意点：
 *          如果你用MemoryRouter路由模式，<Prompt>不起作用
 * */ 